// 一个用户信息组件 一个商品列表组件。两个组件从不同的API请求数据，要求有【加载态】和【数据失败】状态
import useRequest from '../hooks/useRequest'
function UserInfo() {
    const { data, loading } = useRequest('http://10.2.35.4/api/user.json', {})
    return <>
        {loading ? <div>加载中...</div> : <div>用户名：{data.name}，年龄：{data.age}</div>}
    </>
}
function OrderList() {
    const { data, loading } = useRequest('http://10.2.35.4/api/order.json', [])
    return <>
        {loading ? <div>加载中...</div> :
            <ul> {data.map(item => {
                return <li key={item.id}>{item.name}</li>
            })}  </ul>
        }
    </>
}
export { UserInfo, OrderList }